<template>
  <div class="login">
    <!-- 头部导航栏 -->
    <van-nav-bar title="登陆" />

    <!-- 中间表单 -->
    <!-- <van-cell-group>
      <van-field
        v-model.trim="userInfo.mobile"
        type="tel"
        label="手机号"
        required
        :error-message="errorInfo.mobile"
      />
      <van-field
        v-model.trim="userInfo.code"
        type="password"
        label="密码"
        required
        :error-message="errorInfo.code"
      />
    </van-cell-group> -->
    <van-form @submit="xLogin">
      <van-field
        v-model="userInfo.mobile"
        name="mobile"
        label="手机号"
        placeholder="请填写手机号"
        required
        :rules="[{ message: '请输入正确格式的手机号' ,pattern:validate.mobileValidate}]"
      />
      <van-field
        v-model="userInfo.code"
        type="password"
        name="code"
        label="密码"
        placeholder="请输入密码"
        required
        :rules="[{  message: '请输入6位密码', pattern:validate.codeVailidate }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

    <!-- 底部登录按钮 -->
    <!-- <div class="btn-wrap">
      <van-button type="info" @click="xLogin">登陆</van-button>
    </div> -->
  </div>
</template>

<script>
import { login, getProfile } from '@/api/user.js'
export default {
  data () {
    return {
      userInfo: {
        mobile: '13912345678',
        code: '246810'
      },
      validate: {
        mobileValidate: /^1[0-9]{10}$/,
        codeVailidate: /^\d{6}$/
      }
      // errorInfo: {
      //   mobile: '',
      //   code: ''
      // }
    }
  },
  methods: {
    // 登录校验
    // validate () {
    //   const { mobile, code } = this.userInfo
    //   this.errorInfo.mobile = /^1[0-9]{10}$/.test(mobile)
    //     ? ''
    //     : '请输入正确的手机号'
    //   this.errorInfo.code = /^\d{6}$/.test(code) ? '' : '请输入正确密码'
    //   return this.errorInfo.mobile === '' && this.errorInfo.code === ''
    // },
    // 登录请求
    async doLogin () {
      const data = this.userInfo
      // 点击登录按钮直接显示加载中
      this.$toast.loading({
        duration: 0, // 展示时长，值为0时，toast不会消失
        message: '加载中...',
        overlay: true // 是否显示背景遮罩层
      })
      try {
        const res = await login(data)
        // 接口返回数据后，提示登录成功
        console.log(res)
        // 将token值存到vuex中
        this.$store.commit('mTokenInfo', res.data.data)

        const profile = await getProfile()
        this.$store.commit('mUserInfo', profile.data.data)
        console.log(profile)
        this.$toast.success('登陆成功')
        this.$router.push({
          path: '/'
        })
      } catch (err) {
        console.log(err)
        this.$toast.fail('登录失败')
      }
    },
    // 登录按钮
    xLogin () {
      // 1. 表单验证
      // this.validate()
      // 2. 发送登录请求
      // if (!this.validate()) {
      //   return false
      // }
      // form表单自带验证，只有每一项都通过之后才可以触发submit事件
      this.doLogin()
    }
  }
}
</script>

<style lang="less" scoped>
.btn-wrap {
  padding: 20px;
  .van-button {
    width: 100%;
  }
}
</style>
